<template>
  <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" >

            <el-form-item :label="'SAP '+$t('iot.unit')" prop="sapWarehouseName" clearable style="width: 250px;">
              <el-input v-model="state.queryForm.sapWarehouseName" clearable :placeholder="$t('wms.pleaseEnter') + ' SAP '+  $t('iot.unit')"/>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="getDataList">{{$t("common.queryBtn")}}</el-button>
              <el-button icon="refresh"  @click="resetQuery">{{$t("common.resetBtn")}}</el-button>
               <el-button icon="el-icon-plus"  type="primary"
                         @click="unitDialogRef.openAddDialog()">{{$t("common.addBtn")}}
              </el-button>
              <el-button icon="el-icon-delete" type="danger"
                         @click="handleDelete(selectObjs)">{{$t("common.delBtn")}}
              </el-button>
            </el-form-item>
          </el-form>
          <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle">
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column type="index" label="#" width="80"/>
            <el-table-column prop="sapUnitCode" :label="'SAP ' + $t('iot.unit')">
							<template #default="scope">
								<el-tag effect="plain" type="success">{{scope.row.sapPlantCode}}</el-tag>
							</template>
						</el-table-column>
            <el-table-column prop="sapUnitDecimal" :label="'SAP ' + $t('unit.unitDecimal')"/>
            <el-table-column prop="sapUnitDescribe" :label="'SAP ' +$t('unit.unitDescribe')"/>
            <el-table-column prop="mesUnitCode" :label="'MES ' +$t('iot.unit')">
							<template #default="scope">
								<el-tag effect="plain" >{{scope.row.mesUnitCode}}</el-tag>
							</template>
						</el-table-column>            
            <el-table-column :label="$t('operation.Operation')" width="100">
              <template #default="scope">
                <el-button icon="edit"  type="primary" size="small"
                           @click="unitDialogRef.openEditDialog(scope.row)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
       <unitForm ref="unitDialogRef" @refresh="getDataList"/>
      </div>
</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {delWarehouse, fetchWarehouseList} from "/@/api/platform/wms/warehouse";
import {useMessage, useMessageBox} from "/@/hooks/message";
import LocationList from "/src/views/wms/warehouse/location/list.vue";
import unitForm from "/@/views/digital/unit/form.vue";
import {IdArray} from "/@/api/platform/wms/apiTypes";
import { useI18n } from "vue-i18n";

const {t} = useI18n();

// 搜索变量
const queryRef = ref()
const locationRef = ref()
const unitDialogRef = ref()

// 表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchWarehouseList
})
//  table hook
const {
  tableStyle,
  getDataList,
  sizeChangeHandle,
  currentChangeHandle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: Array<number>) => {
  if (ids?.length === 0) {
    return useMessage().warning(t('basProcess.selectDelete'))
  }
  const idArray: IdArray = ids.map(item => ({id: item}));

  useMessageBox().confirm(t('basProcess.permanentlyDeleted')).then(async () => {
    try {
      await delWarehouse(idArray)
      getDataList();
      useMessage().success(t('sop.successfullyDeleted'));
    } catch (err: any) {
      useMessage().error(t('wms.deleteFail') + err.msg)
    }
  })
};


// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row)
}

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList(false)

}
</script>
